<template>
	<view class="progress_box" :class="size==='small'?'small':'big'">
		<canvas class="progress_bg" :class="size==='small'?'small':'big'" :canvas-id="'cpbg'+id"></canvas>
		<canvas class="progress_bar" :class="size==='small'?'small':'big'" :canvas-id="'cpbar'+id"></canvas>
		<canvas class="progress_line" :class="size==='small'?'small':'big'" :canvas-id="'cpline'+id"></canvas>
		<view class="progress_txt">
			<view class="progress_info">{{ size==='small'?progress_txt:progress_txt2}}</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		id:{
			type:String,
			default:'1'
		},
		size: { 
			type: String,
			default: 'small'
		},
		rr: { //数据
			type: [Number, String],
			default: 30
		},
		xy: { //数据
			type: [Number, String],
			default: 65
		},
		// 圆环进度百分比值
		/* percent: {
			type: Number,
			default: 0,
			// 值在0到100之间
			validator: val => {
				return val >= 0 && val <= 100;
			}
		}, */
		progress_txt: { //数据
			type: [Number, String],
			default: 100,
			// 值在0到100之间
			validator: val => {
				return val >= 0 && val <= 100;
			}
		},
		progress_txt2: { //数据
			type: String,
			default: ''
		},
		setLineWidth:{ //设置进度条宽度
			type: [Number, String],
			default: 13
		},
		progress_bg:{ //进度条背景颜色
			type:String,
			default:'#393939'
		},
		setLineCap:{ //进度条圆环端点的形状 square直线  round圆形
			type:String,
			default:'round'
		},
		progress_b_c:{ //进度条渐变bottom颜色
			type:String,
			default:'#08246e'
		},
		progress_t_c:{ //进度条渐变top颜色
			type:String,
			default:'#00c9a7'
		}
	},
	watch: {
		progress_txt(nVal, oVal = 0) {
			if (nVal > 100) nVal = 100;
			if (nVal < 0) oVal = 0;
			this.newPercent = nVal;
			this.oldPercent = oVal;
			setTimeout(() => {
				this.drawCircle(oVal);
			}, 50);
		}
	},
	mounted: function() {
		this.drawProgressbg();
		this.drawCircle(this.progress_txt); //参数为1-100
		//this.drawLine();
	},
	methods: {
		drawProgressbg: function() {
			// 自定义组件实例 this ，表示在这个自定义组件下查找拥有 canvas-id 的 <canvas/>
			var ctx = uni.createCanvasContext('cpbg'+this.id, this);
			ctx.setLineWidth(this.setLineWidth); // 设置圆环的宽度
			ctx.setStrokeStyle(this.progress_bg); // 设置圆环的颜色
			ctx.setLineCap(this.setLineCap); // 设置圆环端点的形状
			//ctx.setLineCap('square'); // 设置圆环端点的形状
			ctx.beginPath(); //开始一个新的路径
			ctx.arc(this.xy, this.xy, this.rr, 0 * Math.PI, 2 * Math.PI, false);
			//设置一个原点(110,110)，半径为100的圆的路径到当前路径
			ctx.stroke(); //对当前路径进行描边
			ctx.draw();
		},
		drawCircle: function(step) {
			var ctx = uni.createCanvasContext('cpbar'+this.id, this);
			// 进度条的渐变(中心x坐标-半径-边宽，中心Y坐标，中心x坐标+半径+边宽，中心Y坐标)
			var gradient = ctx.createLinearGradient(20, 80, 30, 0);
			let increase = 0.05;
			let end = (step / 100) * 2 * Math.PI - Math.PI / 2; // 最后的角度
			let current = -Math.PI / 2; // 起始角度
			let timer = setInterval(() => {
				gradient.addColorStop('0', this.progress_b_c);
				gradient.addColorStop('1.0',this.progress_t_c);
				ctx.setLineWidth(this.setLineWidth);
				ctx.setStrokeStyle(gradient);
				ctx.setLineCap(this.setLineCap);
				ctx.beginPath();
				// 参数step 为绘制的百分比
				if (current < end) {
					current = current + increase;
				}
				if (current >= end) {
					current = end;
					clearInterval(timer);
				}
				ctx.arc(this.xy,this.xy,this.rr, -Math.PI / 2, current, false);
				ctx.stroke();
				ctx.draw();
			}, 0);
		}
	}
};
</script>

<style lang="scss" scoped>
.small{
	width: 260rpx;
	height: 260rpx;
}
.big{
	width: 500rpx;
	height: 500rpx;
}
.progress_box {
	position: relative;
	background-image: url(/static/index/icon-bg.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.progress_bg {
	position: absolute;
}
.progress_bar {
	position: absolute;
}
.progress_line {
	position: absolute;
}
.progress_txt {
	position: absolute;
	font-size: 28upx;
	color: #999999;
}
.progress_info {
	letter-spacing: 2upx;
	font-size: 40rpx;
	color: #949495;
}
.progress_dot {
	width: 16upx;
	height: 16upx;
	border-radius: 50%;
	background-color: #fb9126;
}
</style>